<template>
  <div>
    <el-form class="form">
      <div class="head">
        <el-input
          class="elinput"
          placeholder="根据关键字查询难度"
          v-model="input"
          clearable
        >
        </el-input>
        <el-button
          class="elbut"
          type="primary"
          icon="el-icon-search"
          @click="search"
          >搜索</el-button
        >
        <el-button
          type="primary"
          class="crebut"
          icon="el-icon-plus"
          @click="add"
          >添加</el-button
        >
        <el-button type="danger" class="debut" icon="el-icon-delete"
          >删除</el-button
        >
        <div class="clear"></div>
      </div>
      <el-table
        id="cent"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 65%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="60%"></el-table-column>
        <el-table-column type="index" label="序号" width="120">
        </el-table-column>
        <el-table-column prop="nname" label="难度" width="100">
        </el-table-column>
        <el-table-column label="操作" width="170">
          <template slot-scope="scope">
            <el-button type="text" size="small">查看</el-button>
            <el-button
              disabled
              type="text"
              size="small"
              @click="bianji(scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 修改 -->
      <el-dialog
        title="修改难度"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-form-item label="课程：">
          <el-input v-model="ipt" style="width: 350px" clearable></el-input>
        </el-form-item>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm()">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 添加 -->
      <el-dialog
        title="添加难度"
        :visible.sync="dialogVisibles"
        width="30%"
        :before-close="handleClose"
      >
        <el-form-item label="难度:">
          <el-input v-model="ipts" clearable></el-input>
        </el-form-item>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibles = false">取 消</el-button>
          <el-button type="primary" @click="addss()">确 定</el-button>
        </span>
      </el-dialog>
    </el-form>
  </div>
</template>
<script>
import home from "../../api/home";
export default {
  data() {
    return {
      dialogVisibles: false,
      dialogVisible: false,
      ipts: "",
      ipt: "",
      input: "",
      tableData: [],
    };
  },
  created() {
    this.getQid();
  },
  methods: {
    add() {
      this.dialogVisibles = true;
    },
    getQid() {
      home
        .nseleLise()
        .then((res) => {
          console.log(res);
          this.tableData = res.data.list;
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    },
    handleSelectionChange() {
      console.log(123);
    },
    addss() {},
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    search() {
      let _search = this.jobNo.toLowerCase();
      let newListData = []; // 用于存放搜索出来数据的新数组
      console.log(newListData);
      if (_search) {
        this.xmgcqkJsonsData.filter((item) => {
          if (item.code.toLowerCase().indexOf(_search) !== -1) {
            newListData.push(item);
          }
        });
      }
      this.xmgcqkJsonsData = newListData;
      // console.log(‘新数组',newListData)
      // if (this.input == "") {
      //   this.$message({
      //     message: "搜索框不能为空",
      //     type: "warning",
      //   });
      //   return;
      // }
      // this.axios.get(`/question/qdetails/get/${this.input}`).then((res) => {

      // }).catch((error) => {
      //   this.$message.error(error.message);
      // });
    },
    del(row) {
      home
        .del(row.qid)
        .then(() => {
          this.$message({
            message: "恭喜你，删除成功",
            type: "success",
          });
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    },
    bianji(v) {
      console.log(v);
      this.ipt = v.tname;
      this.dialogVisible = true;
    },
    submitForm() {
      console.log(this.ipt);
    },
  },
};
</script>
<style scoped>
.form {
  width: 90%;
  height: 600px;
  /* background-color: red; */
  margin: auto;
}
.head {
  width: 55%;
  margin-left: 18%;
  /* background-color: royalblue; */
}
#cent {
  margin: auto;
}
#ipt1 {
  width: 200px;
}
.elbut {
  float: left;
  margin-top: 20px;
}
.elinput {
  float: left;
  width: 40%;
  margin-right: 20px;
  margin-top: 20px;
}
.crebut {
  float: left;
  margin-bottom: 30px;
  margin-top: 20px;
}
.debut {
  float: left;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-top: 20px;
}
.clear {
  clear: both;
}
</style>